<template>
    <div>
         <span v-html="title" />
        <input @change.preventDefault="change"  type="checkbox" id="check" v-model="checked" class="toggle" />
        <label for="check">&ensp;{{ status }}</label>
    </div>

</template>

<script lang="ts" setup>
        import { ref, reactive } from 'vue'

    interface Props {
        title?: String | Number | null;
        required?: boolean;
        checked?: boolean;
        }

    const props = withDefaults(defineProps<Props>(), {
            title: null,
            required: false,
            checked: undefined,
           
        });

        const emit = defineEmits([ "onChange"]);
        const checked = ref(props.checked)
        const status = ref(checked.value ? 'true' : 'false')
        const value = reactive({ })

        const change = () => {
            status.value = checked.value ? 'true' : 'false';
            emit("onChange", checked.value)
         }

</script>

So I am using this custom checkbox component, and have three of them on the same page. When I click the first one, the checkbox action and label change is fine, but when I check the second or third checkbox, the checkbox action and label change is shown on the first one rather than the one that was checked.

How can I make this component more functional that each checkbox performs its own action, independent of the others?